<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/function.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span> 1亿+</span>
            回复 <span> 1亿+</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span render-html="author.travelNum"></span>篇游记
                    <span render-html="author.fansNum" id="fans"></span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <!-- 游记的内容 -->
        <div class="content" render-html="travelContent.content"></div>


    </div>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>

</div>

<!--这些js引用不能删，否则页面会报错-->
<link rel="stylesheet" href="/css/strategyComment.css"/>
<link rel="stylesheet" href="/js/plugins/jquery_emoticon/css/base.css"/>
<script src="/js/plugins/jquery_emoticon/jquery.mb.emoticons.js"></script>
<script src="/js/plugins/jrender/jrender.js"></script>
<script>

    var fansId;
    var fansNum;
    $(function () {
        //获取当前登录的用户信息
        var user = JSON.parse(sessionStorage.getItem("user"));
        //全局对象信息
        var followUser;
        //当次用户进入此页面时 获取此对象的id
        var params = getParams();
        if (!params.id) {
            //如果此用户没有登录,请他返回登录页面登录
            return;
        }

        if (params) {
            //文档加载完毕,拿到当前游记的id
            var id = getParams().id;
            //////////////王新添加一条用于自动定位//////
            var destination=getParams().destination;
            var authorId;
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (id) {
                //有id发送ajax请求获取游记信息
                $.get("/travels/" + params.id, function (data) {
                    fansId = data.author.id;
                    fansNum = data.author.fansNum;
                    followUser = data;
                    //回显游记信息
                    $(".travels").renderValues(data);
                    authorId = data.author.id;
                });
            }
        }

        //关注按钮
        $("#followBtn").click(function () {
            $.get("/users/focus", {currentId: user.id, targetId: fansId}, function (data) {
                if (!data.num) {//点击关注时,添加保存关注关系,然后状态变更为取消关注
                    $.get("/users/insert", {currentId: user.id, targetId: fansId}, function (data) {
                        console.log(data);
                        $("#followBtn").text("取消关注");
                        $("#fans").html(data);
                    })
                }else{
                    //点击取消关注时,取消关注关系,然后状态变更为关注
                    $.get("/users/delete", {currentId: user.id, targetId: fansId}, function (data) {
                        console.log(data);
                        $("#followBtn").text("关注");
                        $("#fans").html(data);
                    });
                }
            })
        });


        //获取用户对该文章的点赞状态
        $.get("/likes/users/get", {type: 0, likeId: params.id,userId:user.id}, function (data) {
            if (!data) {//没有点赞
                $("#likeBtn").removeClass("fa fa-thumbs-up fa-1x");
                $("#likeBtn").addClass("fa fa-thumbs-o-up fa-1x");
            }else{
                $("#likeBtn").removeClass("fa fa-thumbs-o-up fa-1x");
                $("#likeBtn").addClass("fa fa-thumbs-up fa-1x");
            }
        })

        //获取用户对该文章的收藏状态
        $.get("/collects/users/get", {type: 0, collectId: params.id,userId:user.id}, function (data) {
            if (!data) {//没有收藏
                $("#collectBtn").removeClass("fa fa-star fa-1x");
                $("#collectBtn").addClass("fa fa-star-o fa-1x");
            }else{
                $("#collectBtn").removeClass("fa fa-star-o fa-1x");
                $("#collectBtn").addClass("fa fa-star fa-1x");
            }
        })

        //发送ajax请求获取游记的评论列表
        $.get("/travels/" + id + "/comments", function (data) {
            $("#comments").renderValues({list: data}, {
                handle: function (ele, value) {
                    $(ele).html(value).emoticonize(true).show();
                },
                replay: function (ele, value) {//点击回复的跳转链接
                    ele.href = "userReply.html?commentId=" + value + "&travelId=" + id;
                },
                reply: function (ele, value) {
                    if (value == 1) {
                        console.log(($(ele).find("span")));
                        $(ele).find("span").css("display", "none");//不显示
                    }
                },
                dest:function (ele,value) {
                    $(ele).attr("id",value);

                }
            });
        });

        ////////////自动定位方法by王新////////////
        if (destination != null) {
            setTimeout(function () {
                var num = $("#"+destination).offset().top;
                $("html, body").animate({
                    scrollTop: num - 250
                }, 1000);

            }, 800);


        }


        //点击评论按钮
        $("#commentBtn").click(function () {
            if (!user) {
                $(document).dialog({
                    type: "confirm",
                    style: "IOS",
                    titleShow: false,
                    content: "亲，还没登录不能评论哦！，",
                    buttons: [{
                        name: "马上登录",
                        callback: function () {
                            location.href = "/login.html";
                        }
                    }]
                });
                return;
            }
            window.location.href = "userComment.html?travelId=" + id + "&id=" + authorId;
        })


        //收藏事件
        $("#collectBtn").click(function () {
            collect(user,params.id,0);
        })

        //点赞事件
        $("#likeBtn").click(function () {
            like(user,params.id,0);
        })
    })


</script>
<!--用户评论列表，不能删-->
<div class="container tag">
    <h6 align="center" class="btn-info">骡友评论</h6>
    <div id="comments">
        <div render-loop="list">
            <div class="container row comment">
                <div class="col-2 comment-head">
                    <a href="userProfiles.html" render-key="list.id" render-fun="dest" >
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </a>
                </div>
                <div class="col comment-right">
                    <span class="authorName" style="margin-right:20px;color:blue"
                          render-html="list.user.nickName"></span>
                    <i class="fa fa-calendar"></i><span render-html="list.commentTime"></span>
                    <div class="comment-content">
                        <div class="reply" render-key="list.themeType" render-fun="reply">
                            <span>回复</span>
                            <span class="nickName" style="margin-right:20px;color:darkorange"
                                  render-html="list.becommented.nickName"></span>
                        </div>
                        <div style="display:none" render-key="list.comment" render-fun="handle">
                        </div>
                        <a href="userReply.html" render-key="list.id" render-fun="replay">
                            <i class="fa  fa-commenting-o " style="margin-right: 10px;color:darkgray">回复ta</i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<hr>
<!--结束-->
</body>
</html>